
<template >
  <div>
    <div class="add">
      <el-button type="primary" @click="dialogs">新增菜单</el-button>
      <el-button type="primary" @click="del">删除</el-button>
    </div>
    <div class="menu_Box">
        <div class="menu">
            <el-tree
              v-loading="loading"
              :data="data"
              :props="defaultProps"
              :default-expand-all="false"
              :highlight-current='true'
              @node-click="handleNodeClick">
            </el-tree>
        </div>
        <div class="r">
            <div class="top">
                <el-form :model="pageData" ref="form" label-width="120px" :disabled="pageData.isShow">
                  <el-form-item label="菜单ID">
                      <el-input  placeholder="请输入内容" v-model="pageData.menuId"></el-input>
                  </el-form-item>
                  <el-form-item label="路径编码">
                      <el-input  placeholder="请输入内容" v-model="pageData.menuCode"></el-input>
                  </el-form-item>
                  <el-form-item label="标题">
                      <el-input  placeholder="请输入内容" v-model="pageData.menuName"></el-input>
                  </el-form-item>
                  <el-form-item label="父级节点">
                      <el-input  placeholder="请输入内容" v-model="pageData.parentMenuId"></el-input>
                  </el-form-item>
                  <el-form-item label="图标">
                      <el-input  placeholder="请输入内容" v-model="pageData.icon"></el-input>
                  </el-form-item>
                  <el-form-item label="排序">
                      <el-input  placeholder="请输入内容" v-model="pageData.ordinal"></el-input>
                  </el-form-item>
                  <el-form-item label="描述">
                      <el-input  placeholder="请输入内容" v-model="pageData.remark"></el-input>
                  </el-form-item>
                </el-form>
                <div class="btn">
                  <el-button type="primary" @click="compile" v-if="pageData.isShow == true">编辑</el-button>
                  <el-button type="primary" @click="compileConfirm" v-else>确定</el-button>
                  <el-button type="primary" @click="pageData.isShow = true">取消编辑</el-button>
                </div>
            </div>

            <div class="bt">
                <p class="title">按钮或资源</p>
                <div class="">
                  <el-form ref="btnForm">
                      <el-form-item>
                          <!-- <el-input  placeholder="资源名称" class="ipt"></el-input>
                          <el-button type="primary">搜索</el-button> -->
                          <el-button type="primary" @click="addBtn">添加</el-button>
                      </el-form-item>
                  </el-form>
                  <div class="">
                    <el-table
                      height="400"
                      v-loading="tableLoading"
                      ref="multipleTable"
                      border
                      :data="list.tbody"
                      tooltip-effect="dark"
                      style="width: 100%">
                      <el-table-column
                        fixed v-for='(item,idx) in list.thead' :label="item.label"  :key='idx' align="center">
                        <template slot-scope="scope">{{ scope.row[item.prop] }}</template>
                      </el-table-column>
                      <el-table-column label="操作" align="center">
                          <template slot-scope="scope">
                            <el-button
                              size="mini"
                              type="success"
                              @click="compileTable(scope.row)">编辑
                            </el-button>
                            <el-button
                              size="mini"
                              type="danger"
                              class="del"
                              @click="handleEdit(scope.row)">删除</el-button>
                          </template>
                      </el-table-column>
                    </el-table>
                  </div>
                </div>
            </div>
        </div>
    </div>


    <dialogVue title="新增菜单" :dialog="dialog" @close="changeData" :state="false">
        <slot>
            <el-form :model="MenuData" ref="form" label-width="80px">
              <el-form-item label="菜单名称">
                  <el-input  placeholder="请输入内容" v-model="MenuData.menuName"></el-input>
              </el-form-item>
              <el-form-item label="类型">
                <el-select v-model="value" placeholder="请选择">
                   <el-option
                     v-for="item in typs"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value">
                   </el-option>
                  </el-select>
              </el-form-item>
              <el-form-item label="菜单编码">
                  <el-input  placeholder="请输入内容" v-model="MenuData.menuCode"></el-input>
              </el-form-item>
              <el-form-item label="菜单url">
                  <el-input  placeholder="请输入内容" v-model="MenuData.href"></el-input>
              </el-form-item>
              <el-form-item label="菜单icon">
                  <el-input  placeholder="请输入内容" v-model="MenuData.icon"></el-input>
              </el-form-item>
              <el-form-item label="排序">
                  <el-input  placeholder="请输入内容" v-model="MenuData.ordinal"></el-input>
              </el-form-item>
              <el-form-item label="父级菜单">
                  <el-input  placeholder="请输入内容" v-model="MenuData.parentMenuId"></el-input>
              </el-form-item>
              <el-form-item label="描述">
                  <el-input  placeholder="请输入内容" v-model="MenuData.description"></el-input>
              </el-form-item>
              <el-form-item class="confirm">
                  <el-button type="primary" @click="addConfirm('ruleForm')">确定</el-button>
              </el-form-item>
            </el-form>
        </slot>
    </dialogVue>

    <dialogVue title="菜单操作" :dialog="operation" @close="changeData" :state="false">
          <slot>
            <el-form :model="operationData" ref="form" label-width="80px">
              <el-form-item label="菜单id">
                  <el-input  placeholder="请输入内容" v-model="operationData.menuId" :disabled='true'></el-input>
              </el-form-item>
              <el-form-item label="资源编码">
                  <el-input  placeholder="请输入内容" v-model="operationData.code"></el-input>
              </el-form-item>
              <el-form-item label="资源名称">
                  <el-input  placeholder="请输入内容" v-model="operationData.name"></el-input>
              </el-form-item>
              <el-form-item label="类型">
                <el-select v-model="operationValue" placeholder="请选择">
                   <el-option
                     v-for="item in operationType"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value">
                   </el-option>
                  </el-select>
              </el-form-item>
              <el-form-item label="方法">
                <el-select v-model="MethodValue" placeholder="请选择">
                   <el-option
                     v-for="item in operationMethod"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value">
                   </el-option>
                  </el-select>
              </el-form-item>
              <el-form-item label="资源路径">
                  <el-input  placeholder="请输入内容" v-model="operationData.uri"></el-input>
              </el-form-item>
              <el-form-item label="资源描述">
                  <el-input  placeholder="请输入内容" v-model="operationData.description"></el-input>
              </el-form-item>
              <el-form-item class="confirm">
                  <el-button type="primary" v-if="OperationBtn == '1'"@click="addOperation('ruleForm')">确定</el-button>
                  <el-button type="primary"  v-if="OperationBtn == '2'" @click="compileOperation('ruleForm')">更新</el-button>
              </el-form-item>
            </el-form>
          </slot>
    </dialogVue>
  </div>
</template>

<script>
  import Data from './MenuData.js'
  import dialogVue from '@/components/dialog.vue'
  import tableVue from '@/components/alltable.vue'
  import checkPermission from "@/utils/permission"; // 权限判断函数
  import {
    addMenu,
    allMenu,
    operation,
    compileMenu,
    delMenu,
    addOperation,
    delOperation,
    updateOperation
  } from '@/api/menu/menu'
  export default {
      components : {
        tableVue,
        dialogVue
      },
      data () {
        return JSON.parse(JSON.stringify(Data))
      },
      mounted () {
        this.getAllMenu();
      },
      methods : {
        checkPermission,
        getOperationList (menuId) {//获取所有资源
          this.tableLoading = true;
          operation(menuId).then(res=>{
            if (res.data.code == 'OK') {
              this.list.tbody = res.data.data;
              setTimeout(()=>{
                this.tableLoading = false;
              },2000)
            } else {
              this.$message.error(res.data.message)
               setTimeout(()=>{
                 this.tableLoading = false;
               },2000)
            }
          })
        },
        getAllMenu () {//获取菜单所有
            this.loading = true;
            allMenu().then(res=>{
              if (res.data.code == 'OK') {
                this.data = res.data.data;
                this.loading = false;
              }
            })
        },
        handleNodeClick (data) {//点击节点
          this.pageData.menuCode = data.menuCode;
          this.pageData.menuName = data.menuName;
          this.pageData.parentMenuId = data.parentMenuId;
          this.pageData.remark = data.remark;
          this.pageData.ordinal = data.ordinal;
          this.pageData.menuId = data.menuId;
          this.pageData.icon = data.icon;
          this.pageData.href = data.href;
          this.pageData.type = data.type;
          this.getOperationList(data.menuId);
          this.id = data.menuId
        },
        compile () {//编辑
          if (this.pageData.menuName == '') {
               this.$message.error('请选择菜单');
          } else if(checkPermission('modify_menu') == true) {
               this.pageData.isShow = false;
          } else {
               this.$message.error('您没有权限操作');
          }
        },
        compileConfirm () {//编辑确定
            let data = {
              menuId : this.pageData.menuId,
              menuName :this.pageData.menuName,
              type : this.pageData.menuId,
              menuCode :this.pageData.menuCode,
              href : this.pageData.href,
              icon : this.pageData.icon,
              ordinal : this.pageData.ordinal,
              parentMenuId :this.pageData.parentMenuId,
              description :this.pageData.remark,
              type :this.pageData.type
            }
            compileMenu(data).then(res=>{
              if (res.data.code == 'OK') {
                this.$message.success('编辑成功');
                 this.pageData.isShow = true;
              } else {
                this.$message.error(res.data.message);
              }
            })
        },
        dialogs() {
          if (checkPermission('add_menu') == true) {
            this.MenuData = {};
            this.dialog = true;
            this.MenuData.parentMenuId = this.id
          } else {
             this.$message.error('您没有权限添加');
          }
        },
        addConfirm () {//新增菜单确定
            let data = {
              menuName : this.MenuData.menuName,
              type : this.value,
              menuCode : this.MenuData.menuCode,
              href : this.MenuData.href,
              icon : this.MenuData.icon,
              ordinal : this.MenuData.ordinal,
              parentMenuId : this.MenuData.parentMenuId,
              description : this.MenuData.description,
            }
            addMenu(data).then(res=>{
              if (res.data.code == 'OK') {
                this.$message.success('新增成功');
                this.getAllMenu();
                this.dialog = false;
              } else {
                this.$message.error(res.data.message);
              }
            })
        },
        changeData (val) {
            this.dialog = val
            this.operation = val;
            this.operationTable = val;
        },
        del () {//删除菜单
          if (this.pageData.menuName == '') {
             this.$message.error('请选择要删除的菜单');
          } else if (checkPermission('remove_menu') == true) {
                var menuId = this.pageData.menuId
                this.delMessage(()=>{
                    delMenu(menuId).then(res=>{
                      if (res.data.code == 'OK') {
                        this.$message.success('删除成功');
                        this.getAllMenu();
                      } else {
                        this.$message.error(res.data.message);
                      }
                    })
                })
          } else {
            this.$message.error('您没有权限操作');
          }
        },
        addBtn () {//添加菜单操作
          if (this.pageData.menuName == '') {
              this.$message.error('请选择需要添加操作的菜单');
          } else if (checkPermission('menu_operiation_add') == true){
             this.operation = true;
             this.OperationBtn = '1';
             this.operationData.menuId = this.pageData.menuId;
          } else {
             this.$message.error('您没有权限操作');
          }
        },
        addOperation () {//添加菜单操作确定
            let data = {
              menuId : this.operationData.menuId,
              code : this.operationData.code,
              name : this.operationData.name,
              type : this.operationValue,
              method : this.MethodValue,
              uri : this.operationData.uri,
              description : this.operationData.description,
            }
            console.log(data)
            addOperation(data).then(res=>{
              if (res.data.code == 'OK') {
                this.$message.success('新增成功');
                this.getOperationList(this.operationData.menuId);
                this.operation = false;
              } else {
                this.$message.error(res.data.message);
              }
            })
        },
        handleEdit (item) {//删除资源
          if (checkPermission('menu_operiation_del') == true) {
                this.delMessage(()=>{
                    delOperation(item.operationId).then(res=>{
                      if(res.data.code == 'OK') {
                          this.$message.success('删除成功');
                            this.getOperationList(this.pageData.menuId);
                      } else {
                        this.$message.error(res.data.message);
                      }
                    })
                })
          } else {
             this.$message.error('您没有权限操作');
          }
        },
        compileTable (item) {
          if (checkPermission('menu_operiation_mod') == true) {
             this.OperationBtn = '2';
              this.operation = true;
              this.operationData.menuId = item.menuId;
              this.operationData.code = item.code;
              this.operationData.name = item.name;
              this.MethodValue = item.method;
              this.operationValue = item.type;
              this.operationData.description = item.remark;
              this.operationData.uri = item.uri;
              this.operationData.operationId = item.operationId
              console.log(item)
          } else {
            this.$message.error('您没有权限操作');
          }
        },
        compileOperation () {//编辑按钮确定
          let data = {
            code : this.operationData.code,
            name : this.operationData.name,
            type : this.operationValue,
            method : this.MethodValue,
            uri : this.operationData.uri,
            description : this.operationData.description,
            operationId : this.operationData.operationId
          }
          updateOperation(data).then(res=>{
            if (res.data.code == 'OK') {
               this.$message.success('更新成功');
               this.getOperationList(this.pageData.menuId);
               this.operation = false;
            } else {
              this.$message.error(res.data.message);
            }
          })
        }
      }
  }
</script>

<style scoped>
.search {
  width: 100%;
  background-color: #fff;
  padding:20px;
  box-sizing: border-box;
  margin-top: 10px;
}
.input {
  /* width: 300px; */
  display: flex;
  flex-wrap: wrap;
}
.input p {
  margin-top: 10px;
}
label {
  line-height: 40px;
  color: #333;
  margin: 0 10px;
}
.el-input {
  width:200px;
  height:20px;
}
.add {
  margin-top: 10px;
  padding-left: 14px;
}
.se {
  margin-left: 20px;
}
.content label {
  display:inline-block;
  width:150px;
  text-align: justify;
  text-align-last: justify;
  line-height: 0;
  font-size: 16px;
}
.content input {
  height:24px;
}
.content p {
  margin: 10px 0;
}
.quan {
  margin-top: 15px;
}
.signature_img {
  display: flex;
  align-items: center;
}
.menu {

  width: 400px;
  border:1px solid #ccc;
}
.el-tree {
  padding: 10px 10px;
  padding-bottom: 30px;
}
.el-tree-node__content{
  padding:10px !important;
}
.menu_Box {
  display: flex;
  padding-top: 10px;
  box-sizing: border-box;
}
.r {
  width: 60%;
  background-color: #fff;
}
.top {
  border:1px solid #ccc;
}
.el-form {
  margin-top:20px;
  width: 100%;
}
.el-form .el-input__inner {
  width:200px !important;
}
.bt {
  border:1px solid #ccc;
  padding:20px 18px;
}
.title {
  font-size: 14px;
  color: #868686;
}
.el-form-item__content .ipt .el-input__inner{
  width: 200px !important;
}
.btn {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}
.confirm {
  position: absolute;
  bottom: -1px;
  right: 100px;
}
</style>
